<script>
export default {
  data () {
    return {
      current: 1,
      size: 10
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    isCustomPage: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: function () {
        return {
          current: 1,
          size: 10
        }
      }
    }
  },
  computed: {
    currentPage () {
      return this.isCustomPage ? this.page.current : this.current
    },
    pageSize () {
      return this.isCustomPage ? this.page.size : this.size
    }
  },
  methods: {
    sizeChange (val) {
      this.size = val
      this.$emit('pageSet', this.current, this.size)
    },
    curChange (page) {
      this.current = page
      this.$emit('pageSet', this.current, this.size)
    }
  },
  render (h) {
    return h('div', {
      class: 'page-wrap-component'
    }, [h('el-pagination', {
      props: {
        'current-page': this.currentPage,
        'page-sizes': [10, 20, 50, 100],
        'page-size': this.pageSize,
        background: true,
        total: this.total,
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      on: {
        'size-change': this.sizeChange,
        'current-change': this.curChange
      }
    })])
  }
}
</script>
<style lang='scss' scoped>
.page-wrap-component {
  text-align: right;
  padding: 22px;
  padding-bottom: 0;
}
</style>
